<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>i movie</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/select.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <script>
        $(function () {

        })
    </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="select-container">
    <div class="seat-container">
        <div class="demo">
            <div id="seat-map">
                <div class="front">屏幕</div>
            </div>
            <div class="booking-details">
                <p>影片：<span id="name"></span></p>
                <p>时间：<span id="time"></span></p>
                <p>座位：</p>
                <ul id="selected-seats">

                </ul>
                <p>票数：<span id="counter">0</span></p>
                <p>总计：<b>￥<span id="total">0</span></b></p>
                <button class="btn  btn-danger" id="buy">确定购买</button>
                <div id="legend"></div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div>
<div class="footer">
    <!--底部-->
    <span>©2020 i movie电影</span>
</div>
<div class="overlay">
    <div class="order-panel">
        <div class="order-wrapper">
            <div>
                <h1 style="font-size: 30px;color: #ffc600;height: 30px;">购票成功</h1>
                <p style="font-size: 15px;height: 30px;margin:0;margin-top: 20px;padding: 0">取票号：<span style="color: #ffc600" id="code"></span></p>
            </div>
            <div>
                <img src="${pageContext.request.contextPath}/images/IMG_20191223_163010.png">
            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.seat-charts.js"></script>
<script>
    $(function () {
        //var price = ${s.price}; //票价
        let id = url("?id");
        $(document).ready(function() {
            NProgress.start();
            var $cart = $('#selected-seats'), //座位区
                $counter = $('#counter'), //票数
                $total = $('#total'); //总计金额
            $.ajax({
                url:'${pageContext.request.contextPath}/front/cinema/getSessionById',
                dataType: "json",
                data:{id:id},
                async:true,
                success:function (data) {
                    NProgress.done();
                    $('#name').text(data.data.movie_id.name);
                    $('#time').text(data.data.day+"  "+data.data.time);
                    let arr = data.data.booked_seat.split(',');
                    let price = data.data.price;
                    var sc = $('#seat-map').seatCharts({
                        map: [  //座位图
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            '__________',
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            'aaaaaaaaaa',
                            'aa__aa__aa'
                        ],
                        legend : { //定义图例
                            node : $('#legend'),
                            items : [
                                [ 'a', 'available',   '可选座' ],
                                [ 'a', 'unavailable', '已售出']
                            ]
                        },
                        click: function () { //点击事件
                            if (this.status() == 'available') { //可选座
                                $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
                                    .attr('id', 'cart-item-'+this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);

                                $counter.text(sc.find('selected').length+1);
                                $total.text(recalculateTotal(sc)+price);

                                return 'selected';
                            } else if (this.status() == 'selected') { //已选中
                                //更新数量
                                $counter.text(sc.find('selected').length-1);

                                //更新总计
                                $total.text(recalculateTotal(sc)-price);

                                //删除已预订座位
                                $('#cart-item-'+this.settings.id).remove();
                                //可选座
                                return 'available';
                            } else if (this.status() == 'unavailable') { //已售出
                                return 'unavailable';
                            } else {
                                return this.style();
                            }
                        }
                    });
                    //console.log(arr);
                    sc.get(arr).status('unavailable');
                    $('#buy').click(function () {
                        NProgress.start();
                        let seat =sc.find('selected').seatIds;
                        let booked_seat = arr.concat(seat);
                        console.log(booked_seat);
                        let code = randomNum(6);
                        let sessionId = id;
                        let total = $('#total').text();
                        $('#code').text(code);
                        $.ajax({
                            url:'${pageContext.request.contextPath}/front/cinema/buy',
                            dataType: "json",
                            type:'POST',
                            data:JSON.stringify({seat:seat,booked_seat:booked_seat,sessionId:sessionId,total:total,code:code}),
                            async:true,
                            contentType:"application/json;charset=utf-8",
                            success:function (data) {
                                NProgress.done();
                                if(data.status===1){
                                    $('.overlay').show();
                                    layer.msg("购票成功",function () {
                                        window.location.href='${pageContext.request.contextPath}/front/index/order'
                                    })
                                }
                            }
                        })
                    });
                    function recalculateTotal(sc) {
                        var total = 0;
                        sc.find('selected').each(function () {
                            total += price;
                        });
                        return total;
                    }
                    function randomNum(n){
                        var t='';
                        for(var i=0;i<n;i++){
                            t+=Math.floor(Math.random()*10);
                        }
                        return t;
                    }
                }
            })
            $('.overlay').hide();
            $('.overlay').click(function () {
                $(this).hide();
            })
            $('.order-panel').click(function (e) {
                e.stopPropagation();
            });

            //已售出的座位

        });
        //计算总金额

    })

</script>
</body>
</html>
